<script setup lang="ts">
import type { Ref } from 'vue'
import { Logo, Menu } from '../../components'

const isOpen = inject<Ref<boolean>>('isOpen')
const isOpenChange = inject('isOpenChange') as () => void

const drawerChange = (e: boolean) => {
  if (!e) {
    isOpenChange()
  }
}
</script>

<template>
  <n-drawer :show="isOpen" width="210" placement="left" @update-show="drawerChange">
    <div class="ipad">
      <Logo />
      <n-layout has-sider class="scroll">
        <n-layout-sider
          bordered
          show-trigger
          :collapsed="!isOpen"
          collapse-mode="width"
          :collapsed-width="64"
          :width="200"
        >
          <Menu />
        </n-layout-sider>
      </n-layout>
    </div>
  </n-drawer>
</template>

<style scoped lang="scss">
.ipad {
  height: 100%;
  background: var(--yang-menu-navone-bg-color);
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
  .scroll {
    flex: 1 0 0;
    background: var(--yang-menu-navone-bg-color);
  }
}
</style>
<style lang="scss">
.n-layout-sider {
  background: var(--yang-menu-navone-bg-color) !important;
}
.n-layout-toggle-button,
.n-layout-sider__border {
  display: none !important;
}
</style>
